<!DOCTYPE html>
<html>
  <head>
    <title>Dora | LF AI Dev HK 2024</title>
    <meta charset="utf-8" />
    <style>
      @font-face {
        font-family: "ABeeZee";
        src: url("fonts/ABeeZee.woff2") format("woff2");
        font-weight: 400;
        font-style: normal;
        font-size: 1rem;
      }

      @font-face {
        font-family: "Carlito";
        src: url("fonts/Carlito.woff2") format("woff2");
        font-weight: 400;
        font-style: normal;
        font-size: 1rem;
      }

      @font-face {
        font-family: "Carlito";
        src: url("fonts/Carlito-Bold.woff2") format("woff2");
        font-weight: 700;
        font-style: normal;
        font-size: 1rem;
      }

      @font-face {
        font-family: "Carlito";
        src: url("fonts/Carlito-Italic.woff2") format("woff2");
        font-weight: normal;
        font-style: italic;
        font-size: 1rem;
      }

      @font-face {
        font-family: "Iosevka Web";
        font-display: swap;
        font-weight: 400;
        font-stretch: normal;
        font-style: normal;
        src: url("fonts/iosevka-regular.woff2") format("woff2");
        font-size: 1rem;
      }

      @font-face {
        font-family: "Carlito";
        src: url("fonts/Carlito-BoldItalic.woff2") format("woff2");
        font-weight: 700;
        font-style: italic;
      }

      @font-face {
        font-family: "Bebas Neue";
        src: url("fonts/BebasNeueRegular.woff2") format("woff2");
        font-weight: 400;
        font-style: normal;
      }

      @font-face {
        font-family: "Bebas Neue";
        src: url("fonts/BebasNeueBold.woff2") format("woff2");
        font-weight: 700;
        font-style: normal;
      }

      @font-face {
        font-family: "Iosevka Web";
        font-display: swap;
        font-weight: 400;
        font-stretch: normal;
        font-style: italic;
        src: url("fonts/iosevka-italic.woff2") format("woff2");
      }

      @font-face {
        font-family: "Iosevka Web";
        font-display: swap;
        font-weight: 700;
        font-stretch: normal;
        font-style: normal;
        src: url("fonts/iosevka-bold.woff2") format("woff2");
      }

      @font-face {
        font-family: "Iosevka Web";
        font-display: swap;
        font-weight: 700;
        font-stretch: normal;
        font-style: italic;
        src: url("fonts/iosevka-bolditalic.woff2") format("woff2");
      }
      @page {
        size: 1210px 681px;
        margin: 0;
      }

      @media print {
        .remark-slide-scaler {
          width: 100% !important;
          height: 100% !important;
          transform: scale(1) !important;
          top: 0 !important;
          left: 0 !important;
        }
      }

      body {
        font-family: "ABeeZee";
      }

      .remark-slide-content {
        padding: 1rem 4rem 1rem 4rem;
      }

      .middle-slide {
        font-size: 1rem;
      }

      h1,
      h2,
      h3 {
        font-family: "Carlito";
      }

      .remark-slide-content h1 {
        margin-top: 1rem;
        font-size: 4rem;
        margin-bottom: 2rem;
      }

      .remark-code,
      .remark-inline-code {
        font-family: "Iosevka Web", Iosevka, monospace;
      }

      .title-slide {
        background-size: cover;
      }

      .final-slide {
        background-size: cover;
      }

      .title-slide .remark-slide-number,
      .final-slide .remark-slide-number {
        visibility: hidden;
      }

      .title-slide h1 {
        font-weight: bold;
        text-transform: uppercase;
        font-family: "Bebas Neue";
        font-size: 96pt;
        margin-top: 1.5rem;
      }

      .title-slide h2 {
        font-size: 3.5rem;
        margin-bottom: 0rem;
        margin-top: 1rem;
      }

      .title-slide .author-info {
        position: absolute;
        bottom: 2rem;
        font-size: 1.5rem;
      }

      .final-slide h1 {
        margin-top: 1.5rem;
        font-size: 6rem;
      }

      li {
        margin-top: 0.5rem;
      }

      li p:first-child {
        margin-top: 0rem;
      }

      li p {
        margin-bottom: 0rem;
      }

      li pre {
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
      }

      .remark-slide-number {
        right: 2rem;
      }

      .footer {
        position: absolute;
        opacity: 0.5;
        bottom: 12px;
        left: 4rem;
        font-size: 1rem;
        line-height: 1.8;
        text-align: left;
      }

      .right-column {
        width: 25%;
        float: right;
        display: block;
        font-size: 0.8em;
        margin-left: 2rem;
      }

      .right-column-wide {
        width: 40%;
        float: right;
        display: block;
        font-size: 0.8em;
        margin-left: 2rem;
      }

      .right-column-wide pre:first-child {
        margin-top: 0rem;
      }

      .right-column figure {
        margin: 0rem;
      }

      .right-column img {
        max-width: 100%;
      }

      .right-column figcaption {
        font-style: italic;
        font-size: 0.8em;
        color: #555;
      }

      .right-column h3 {
        margin-bottom: 0rem;
        font-size: 1.2em;
      }

      .right-column > :first-child {
        margin-top: 0rem;
      }

      .footnotes,
      .footnotes a {
        color: #666;
      }

      .right-column ol {
        margin-top: 0.5rem;
      }

      code,
      .code {
        font-family: "Iosevka";
      }

      .footnote {
        color: gray;
        font-size: 0.6em;
        vertical-align: super;
        position: relative;
        padding-left: 0.2rem;
        padding-top: -5rem;
      }

      .footnote::before {
        content: "[";
      }

      .footnote::after {
        content: "]";
      }

      .gray {
        color: gray;
      }

      .green-border {
        border: 2px solid green;
      }

      .green-border td {
        border-left: 2px solid green;
        min-width: 3rem;
        text-align: center;
      }

      .green-border td:first-child {
        border-left: none;
      }

      .pass-data-check {
        height: 0.9em;
        vertical-align: -0.2rem;
      }

      .remark-notes {
        font-size: 2rem;
      }
      .container {
        display: flex;
        justify-content: space-between;
      }
      .column {
        flex: 1;
        padding: 10px;
        margin: 5px;
        border-radius: 15px;
        font-size: 1.5rem;
      }

      .filled-border {
        border: 1px inset black;
      }
      .dashed-border {
        border: 1px dashed black;
      }
      .very-dashed-border {
        border: 1px dashed rgba(10, 9, 9, 0.464);
      }
      table {
        width: 100%;
        border-collapse: collapse;
        font-size: 1rem;
      }
      table,
      th,
      td {
        border: 1px solid black;
      }
      th,
      td {
        padding: 8px;
        text-align: left;
      }
      th {
        background-color: #f2f2f2;
      }
      
    </style>
  </ad>
/
  <b/>
    <script src="remark-latest.min.js"></script>
    <script type="text/javascript">
      var slideshow = remark.create({
        sourceUrl: "/README.md",
        scroll: false,

      });
    </script>
  </body>
</html>
